<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="wrapper">
    <div class="pic_box box1">
        <div class="pic_item item1 none">01</div>
    </div>
    <div class="pic_box box2">
        <div class="pic_item item2">02</div>
    </div>
    <div class="pic_box box3">
        <div class="pic_item item3">03</div>
    </div>
    <div class="pic_box box4">
        <div class="pic_item item4">04</div>
    </div>
    <div class="pic_box box5">
        <div class="pic_item item5">05</div>
    </div>
    <div class="pic_box box6">
        <div class="pic_item item6">06</div>
    </div>
</div>
<script src="./js/jquery.js"></script>
<script>
    $(document).ready(function () {
        var imgWrapper = $('.wrapper');
        var imgBox = $('.pic_box');
        var timer = null;
        var distance = 90;
        var imgIndexNow = 0;
        var imgIndexMouse = 0;

        var imgWrapperWidth = imgWrapper.width();

        console.log(imgWrapperWidth)

        function mouseSlide() {
            if (imgIndexMouse > imgIndexNow) {
                //鼠标左边图片移动，即鼠标选中的是当前图片右边的图片
                for (var i = imgIndexNow + 1; i <= imgIndexMouse; i++) {
                    imgBox.eq(imgIndexMouse).children().addClass('none');
                    imgBox.eq(imgIndexMouse).siblings().children().removeClass('none');
                    imgBox.eq(i).stop().animate({ 'left': distance * i + 'px' }, 700);
                }
                imgIndexNow = imgIndexMouse;
            } else {
                //鼠标右边图片移动，即鼠标选中的是当前图片左边的图片
                for (var i = imgIndexNow; i > imgIndexMouse; i--) {
                    //图片左上角数字样式改变
                    imgBox.eq(imgIndexMouse).children().addClass('none');
                    imgBox.eq(imgIndexMouse).siblings().children().removeClass('none');
                    //图片移动
                    imgBox.eq(i).stop().animate({ 'left': imgWrapperWidth - (imgBox.length - i) * distance + 'px' }, 700);
                }
                imgIndexNow = imgIndexMouse;
            }
        }
        function autoSlide() {
            if (imgIndexNow === imgBox.length) {
                imgIndexMouse = 0;
            } else {
                imgIndexMouse ++;
            }
            mouseSlide();
        }
        timer = setInterval(autoSlide, 3000);
        imgBox.hover(function() {
           clearInterval(timer);
           imgIndexMouse = $(this).index();
           if(imgIndexMouse !== imgIndexNow) {
               mouseSlide();
           }
        }, function () {
            timer = setInterval(autoSlide, 3000);
        });
    });
</script>
</body>
</html>
